<template>
  <div class="add-lesson">
    <el-form ref="form" :model="lesson" label-width="80px">
         <el-form-item label="课时名称">
            <el-input v-model="lesson.theme"></el-input>
        </el-form-item>
        <el-form-item label="时长">
            <el-input type="number" v-model="lesson.duration">
                <template slot="append">分钟</template>
            </el-input>
        </el-form-item>
        <el-form-item label="课时排序">
            <el-input v-model="lesson.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="开放试听">
            <el-switch v-model="lesson.isFree"></el-switch>
        </el-form-item>
         <el-form-item>
            <div class="formButton">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button>取消</el-button>
            </div>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveOrUpdateLesson, getLessonById } from '@/services/course-section'
export default {
  props: {
    editLessonId: {
      type: [Number, String]
    }
  },
  data () {
    return {
      lesson: {}
    }
  },
  methods: {
    async loadData () {
      var lessonId = this.editLessonId;
      const { data } = await getLessonById(lessonId)
      console.log(data)
      if (data.code === '000000') {
        this.lesson = data.data
      }
    },
    async onSubmit () {
      const { data } = await saveOrUpdateLesson(this.lesson)
      console.log(data)
      if (data.code === '000000') {
        this.$message.success('编辑成功')
        this.$emit('handleEditLessonVisiable', 1)
      }
    }
  },
  created () {
    // console.log('editLessonId==========', this.editLessonId)
    this.loadData()
  },
  watch: {
    editLessonId () {
      this.loadData()
    }
  }
}
</script>

<style>
.formButton{
  text-align: right;
}
</style>
